<!--基金超市首页-->
<template>
  <div>
    <div>
      <div class="topContant">
        <x-header :left-options="{preventGoBack: true}" style="color: #000;" @on-click-back="back">基金超市<a slot="right" style="color: #000;">我的基金</a></x-header>

        <div class="searchBox">
          <div class="searchDiv">
            <span class="search-icon"><img src="../../assets/img/Fundation/search.png"/></span>
              <input type="text" placeholder="请输入基金产品名称或代码" class="searchInput">
            <span class="search-icon"><img src="../../assets/img/Fundation/icon_x.png"/></span>
          </div>
        </div>
        <div class="condition">
          <div class="item month">
            <span>月涨跌幅</span>
          </div>
          <div class="item gupiao" @click="choose()"><span>{{picked}}</span></div>
          <div class="item"><div class="shaixuan">筛选</div>
            <x-button  mini plain type="primary" @click.native="showFilter = true"
            style="border:0px; height: 0.46rem; width: 0.36rem;">
              <img class="filterIcon" src="../../assets/img/Financial/shaixuan.png">
            </x-button>
          </div>
          <popup v-model="showFilter" position="bottom" height="93%" :show-mask='false'>
            <div class="screenMenu">
              <div class="scrollcontaner">
                <div v-for="(list,listIndex) in lists" :key="listIndex" class="type">
                  <h3>{{list.type}}</h3>
                  <div class="container">
                    <div v-for="(screen,screenIndex) in list.screens" :key="screenIndex" class="screen" >
                      <div class="tab" :class="screen.selected===1?'selected':''" @click="selectTab(listIndex,screenIndex)">{{screen.name}}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="buttons">
                <div @click="showFilter = false" class="button">清除所选</div>
                <div @click="showFilter = false" class="button">确定</div>
              </div>
            </div>
          </popup>
        </div>
      </div>
    </div>
    <div class="bodyContent" v-show="true">
        <div class="box">
          <div class="productInfo">
            <!-- 基金列表 -->
            <div  class="hot-title">
                <div class="hot-text">上投摩根核心成长</div>
                <div class="hot-icon">
                    <img class="iconImg" src="../../assets/img/Fundation/hot@3x.png">
                </div>
                <div class="sell">可定投</div>
                <span class="num">10654</span>
            </div>
            <div class="body-main">
              <div class="box-body">
                <div class="rate">9.36%</div>
                <div class="increase">月涨跌幅</div>
              </div>
              <div class="box-body">
                <div class="box-detail">
                  <div>最新净值(元)</div>
                  <div>基金类型</div>
                  <div>风险等级</div>
                </div>
                <div class="box-detail">
                  <div class="box-num">0.8880</div>
                  <div>股票型</div>
                  <div>中风险</div>
                </div>
              </div>
            </div>
          </div>

          <div class="productInfo">
            <!-- 基金列表 -->
            <div  class="hot-title">
                <div class="hot-text">上投摩根核心成长</div>
                <div class="hot-icon">
                    <img class="iconImg" src="../../assets/img/Fundation/hot@3x.png">
                </div>
                <div class="sell">可定投</div>
                <span class="num">10654</span>
            </div>
            <div class="body-main">
              <div class="box-body">
                <div class="rate">9.36%</div>
                <div class="increase">月涨跌幅</div>
              </div>
              <div class="box-body">
                <div class="box-detail">
                  <div>最新净值(元)</div>
                  <div>基金类型</div>
                  <div>风险等级</div>
                </div>
                <div class="box-detail">
                  <div class="box-num">0.8880</div>
                  <div>股票型</div>
                  <div>中风险</div>
                </div>
              </div>
            </div>
          </div>

          <div class="productInfo">
            <!-- 基金列表 -->
            <div  class="hot-title">
                <div class="hot-text">上投摩根核心成长</div>
                <div class="hot-icon">
                    <img class="iconImg" src="../../assets/img/Fundation/hot@3x.png">
                </div>
                <div class="sell">可定投</div>
                <span class="num">10654</span>
            </div>
            <div class="body-main">
              <div class="box-body">
                <div class="rate">9.36%</div>
                <div class="increase">月涨跌幅</div>
              </div>
              <div class="box-body">
                <div class="box-detail">
                  <div>最新净值(元)</div>
                  <div>基金类型</div>
                  <div>风险等级</div>
                </div>
                <div class="box-detail">
                  <div class="box-num">0.8880</div>
                  <div>股票型</div>
                  <div>中风险</div>
                </div>
              </div>
            </div>
          </div>

          <div class="productInfo">
            <!-- 基金列表 -->
            <div  class="hot-title">
                <div class="hot-text">上投摩根核心成长</div>
                <div class="hot-icon">
                    <img class="iconImg" src="../../assets/img/Fundation/hot@3x.png">
                </div>
                <div class="sell">可定投</div>
                <span class="num">10654</span>
            </div>
            <div class="body-main">
              <div class="box-body">
                <div class="rate">9.36%</div>
                <div class="increase">月涨跌幅</div>
              </div>
              <div class="box-body">
                <div class="box-detail">
                  <div>最新净值(元)</div>
                  <div>基金类型</div>
                  <div>风险等级</div>
                </div>
                <div class="box-detail">
                  <div class="box-num">0.8880</div>
                  <div>股票型</div>
                  <div>中风险</div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <!-- 遮罩层 -->
<div id="bg" v-if="showBg" @click="hideList"></div>
    <div id="filter" @click="chooseShow = false;showBg = false;">
      <div class="shoptype_filter" v-if="chooseShow">
        <div class="shop-border">
          <!-- <span class="shoptype_text" v-model="picker">美元</span> -->
          <input type="radio" id="one" value="美元" v-model="picked">
          <label for="one">美元</label>
        </div>
        <!-- <span for="one" :class="{'icon-checked': picked}">中</span> -->

        <div class="shop-border">
          <!-- <span class="shoptype_text" @click="choose()">货币型</span> -->
          <input type="radio" id="two" value="货币型" v-model="picked">
          <label for="two">货币型</label>
        </div>
        <!-- <span for="two" :class="{'icon-checked': picked}">中</span> -->

        <div class="shop-border">
          <input type="radio" id="three" value="股票型" v-model="picked" checked>
          <label for="three">股票型</label>
        </div>
        <!-- <span :class="{'icon-checked': picked}">中</span> -->

        <div class="shop-border">
          <input type="radio" id="four" value="债券型" v-model="picked">
          <label for="four">债券型</label>
        </div>
        <!-- <span :class="{'icon-checked': picked}">中</span> -->

        <div class="shop-border">
          <input type="radio" id="five" value="混合型" v-model="picked">
          <label for="five">混合型</label>
        </div>
        <!-- <span :class="{'icon-checked': picked}">中</span> -->

        <div class="shop-border">
          <input type="radio" id="six" value="基金资管" v-model="picked">
          <label for="six">基金资管</label>
        </div>
        <!-- <span :class="{'icon-checked': picked}">中</span> -->
      </div>
    </div>
    <div class="nodata" v-if="false">
      <img class="nodataImg" src="../../assets/img/Financial/nodataImg.png">
      <div class="nodataMsg">没有找到符合条件的基金</div>
    </div>
  </div>
</template>

<script>
// import gupiao from './components/cgbShoppingGroupMenu'
/*eslint-disable*/
export default {
  data () {
    return {
      title: '基金超市',
      showFilter: false,
      n: 10,
      searchOnFocus: true,
      prdList: [],
      chooseShow: false,
      showBg: false,
      picked:'股票型',
      lists: [{
        type: '基金类型', screens: [{name: '货币型', selected: 0}, {name: '股票型', selected: 0}, {name: '混合型', selected: 0}, {name: '债券型', selected: 0}, {name: '资金资管', selected: 0}, {name: '短期理财', selected: 1}, {name: '信托计划', selected: 0}, {name: '券商资管', selected: 0}, {name: '期货资管', selected: 0}, {name: '其他', selected: 0}]
      }, {
        type: '币种', screens: [{name: '人民币', selected: 0}, {name: '美元', selected: 0}]

      }, {
        type: '风险等级', screens: [{name: '低风险', selected: 0}, {name: '中风险', selected: 0}, {name: '高风险', selected: 1}]

      }, {
        type: '净值区间', screens: [{name: '0.0-1.0', selected: 0}, {name: '1.0-2.0', selected: 0}, {name: '2.0-3.0', selected: 0}]
      }, {
        type: '月涨跌幅', screens: [{name: '小于0', selected: 0}, {name: '0-2%', selected: 0}, {name: '2%-5%', selected: 0}]
      }]
    }
  },
  methods: {
    back () {
      let lRouter = this.$router ? this.$router : window.history
      this.$publicFun.goBack(this.$store.getters.getRouterHistoryLength, lRouter)
    },
    choose(){
      this.chooseShow =!this.chooseShow
      this.showBg = !this.showBg
    },
    /**
     * 点击遮罩层收起筛选界面
     */
    hideList() {
      this.chooseShow = false;
      this.showBg = !this.showBg
    },
    gotoMyFinancial () {
      this.$router.push({name: 'MyFinancial'})
    },
    getFinancialData () {
      let l_vm = this
      window.WebViewJavascriptBridge.callHandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'H5PanelTest'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            l_vm.prdList = response.data.data
          } else {
            l_vm.aaa = response.data.data
          }
        }
      )
    },
    gotoDetail (type) {
      if (type === '1') {
        this.$router.push({name: 'FinancialProductDetail'})
      } else {
        this.$router.push({name: 'FinancialOverseasDetail'})
      }
    },
    loadMore () {
      setTimeout(() => {
        if (this.n < 15) {
          this.prdList = this.prdList.concat(this.prdList)
          this.n++
        }
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    refresh () {
      setTimeout(() => {
        this.prdList = this.prdList.slice(0, 10)
        this.$nextTick(() => {
          setTimeout(() => {
            this.$refs.scroller.donePulldown()
            this.pullupEnabled && this.$refs.scroller.enablePullup()
          }, 10)
        })
      }, 2000)
    },
    changePullupStatus (enabled) {
      if (enabled) {
        this.$refs.scroller.enablePullup()
        this.pullupEnabled = true
      } else {
        this.$refs.scroller.disablePullup()
        this.pullupEnabled = false
      }
    },
    // 弹出筛选框
    selectTab (listIndex, screenIndex) {
      let screenLength = this.lists[listIndex].screens.length
      // 后面按钮 状态数组
      let backSelectTab = []
      // 如果点击了全选
      if (screenIndex === 0) {
        if (this.lists[listIndex].screens[0].selected === 1) {
          this.lists[listIndex].screens[0].selected = 0
        } else {
          this.lists[listIndex].screens[0].selected = 1
        }
      } else {
        // 如果点击的不是全选
        // 反选
        if (this.lists[listIndex].screens[screenIndex].selected === 1) {
          this.lists[listIndex].screens[screenIndex].selected = 0
        } else {
          this.lists[listIndex].screens[screenIndex].selected = 1
        }
        // console.log(backSelectTab.indexOf(-1),backSelectTab)
        // 如果之前全选
        if (this.lists[listIndex].screens[0].selected) {
          this.lists[listIndex].screens[0].selected = 0
        }
      }
      // 如果全选 其他灭
      for (var i = 1; i < screenLength; i++) {
        backSelectTab.push(this.lists[listIndex].screens[i].selected)
      }
      if (this.lists[listIndex].screens[0].selected && backSelectTab.indexOf(1) !== -1) {
        for (var j = 1; j < screenLength; j++) {
          this.lists[listIndex].screens[j].selected = 0
        }
      }
    }
  },
  created () {
    this.getFinancialData()
  }
}
</script>

<style lang="less" scoped>
  *{
    box-sizing: border-box;
  }
  input{
    background: #fff;
  }

  #bg {
    width: 100%;
    height: 1000%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 2.88rem;
    z-index: 1000;
    margin-top: pxToRem(221.25);
  }
  .refresh{
    width: 2rem;
    font-size: 0.3rem;
    text-align: center;
    color: #fff;
    font-weight: bolder;
    margin: 0.3rem auto;
    background: #EC1B30;
    border-radius: 0.1rem;
  }
  .searchBox{
    width: 100%;
    height:1.16rem;
    background: #EAEAEA;
    font-size: 0.14rem;
    padding:.2rem;
    >img{
      margin-top:.05rem;
      width:.2rem;
      height:.2rem;
    }
  }
  .search-icon {
    text-align: center;
  }
  .searchDiv {
    background-color: #fff;
    height:0.8rem;
  }
  .searchInput{
    width: 5.5rem;
    height: 0.6rem;
    border: none;
    margin: 0.18rem 0.3rem;
    font-size: 0.3rem;
  }
  .nodataMsg{
    text-align: center;
    font-size: 0.28rem;
    width: 100%;
    color: #333333;
  }
  .nodataImg{
    margin: 0.68rem 2.06rem 0.1rem 2.06rem;;
    height: 3.26rem;
    width: 3.38rem;
  }
  .topContant{
    position: static;
  }
  .title{
    width: 100%;
    height: 0.88rem;
    text-align: center;
    line-height: 0.88rem;
    background: #fff;
    color: #333333;
    font-size: 0.28rem;
    font-weight: bolder;
  }
  .condition{
/*    width: 92%;*/
    display: flex;
    justify-content: space-between;
    padding-left:.5rem;
    align-items: center;
    font-size: 0.28rem;
    height:.8rem;
    border-bottom: 1px solid #EAEAEA;
/*    padding-left: 0.3rem;
    padding-bottom: 0.1rem;*/
    //padding: 0.2rem 0 0.1rem 0.3rem;
    background: #fff;
    .item{
      display: flex;
      justify-content: space-around;
      align-items:center;
      width:20%;
    }
    .month::after{
        content: '';
        width: 11%;
        height: 0.32rem;
        display: block;
        background: url(../../assets/img/Financial/jiantou.png) right center/100% 90% no-repeat;
      }
    .gupiao::after{
        content: '';
        width: 10%;
        height: 0.15rem;
        display: block;
        background: url(../../assets/img/Fundation/jiantou@2x.png) right center/100% 90% no-repeat;
    }
    .shaixuan {
      margin-right:-.8rem;
    }

  }
  // .rateMsg{
  //   padding: 0.14rem 0.085rem 0px 0rem;
  // }
  .secondIcon{
    padding-top: 0.14rem;
    cursor: pointer;
    padding-right: 0.6rem;
  }
  .sortIcon{
    height: 0.28rem;
    width: 0.16rem;
    margin-top: 0.06rem;
  }
  // .timeMsg{
  //   padding: 0.14rem 0px;
  // }
  // .moneyMsg{
  //   padding-top: 0.14rem;
  //   padding-left: 0.43rem;
  // }
  // .filterMsg{
  //   padding: 0.14rem 0.11rem 0rem 1.2rem;
  // }
  .filterIcon{
    height: 0.46rem;
    width: 0.36rem;
    cursor: pointer;
  }
  .productList{
    width: 100%;
    background: #EAEAEA;
  }
  .box{
    background: #fff;
    margin-top: 0.2rem;
    width:100%;
    height:auto;
  }
  .productInfo{
    width: 92%;
    margin-left: 0.3rem;
    border-bottom: 1px solid #EAEAEA;
    height: 2.4rem;
    overflow: hidden;
    padding-top: .2rem;
    .hot-title{
      padding:0;
      height:27px;
      line-height: 30px;
      display: flex;
      align-items: center;
    }
    .hot-text {
      font-size:.32rem;
      font-weight:bold;
    }
    .hot-icon{
      display: inline-block;
      font-size: .3rem;
    }
    .sell {
      display: inline-block;
      width: 0.8rem;
      border-radius: 30px;
      background: #6666FF;
      color: #fff;
      text-align: center;
      line-height: 0.3rem;
      font-weight: normal;
      font-size: .1rem;
      height: .25rem;
    }
    .num{
      position: absolute;
      right:.4rem;
      color:#ccc;
    }
    .body-main{
      width:100%;
      .box-body{
        float:left;
        width:50%;
        &:first-child{
          border-right:1px solid #ccc;
        }
        .rate{
          color:#FF6633;
          font-size: .5rem;
          padding: .2rem;
        }
        .increase{
          color:#666;
          margin:-.3rem 0 0 .25rem;
        }
        .box-detail {
          float:left;
          padding-left:.2rem;
          .box-num {
            color:#FF6633;
          }
        }
      }
    }

  }
  /*股票型筛选*/ 
  #filter {
    max-height: 44%;
    width: 100%;
    position: fixed;
    z-index: 2000;
    top: 2.88rem;
    overflow: hidden;
    overflow-y: auto;
    background: #f5f5f5;
  }

  .shoptype_filter {
    position: relative;
    background: #fff;
  }
  .shoptype_text {
    border-top:1px solid #ccc;
  }
  .shop-border{

    padding-left: 30px;
    display: block;
    width: 80%;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height:.8rem;
    line-height: .8rem;
    border-bottom:1px solid #EAEAEA;
    width:100%;
    label{
      display: inline-block;
      width:100%;
    }
  }
  .icon-checked {
    color:orange;
  }

  #shoptype_filter .shoptype_list {
    height: 105px;
    line-height: 105px;
    font-size: 30px;
    position: relative;
    color: #222;
    background: #fff;
  }
  .productName{
    float: left;
    font-size: 0.3rem;
    margin-top: 0.38rem;
    width: 5.4rem;
  }
  .productIcon{
    float: right;
    width: 1.27rem;
    height: 1.27rem;
  }
  .iconImg{
    float: right;
    width: .3rem;
    height: .3rem;
  }
  .productRate{
    float: left;
    margin: 0.31rem 0rem 0.38rem 0rem;
    width: 4rem;
  }
  .productRateNum{
    font-size: 0.5rem;
    color: #ff6633;
  }
  .productRateMsg{
    font-size: 0.26rem;
    color: #666666;
  }
  .productDate{
    float: left;
    margin: 0rem 0rem 0.38rem 0rem;
  }
  .productDateTime{
    font-size: 0.26rem;
    font-weight: bolder;
    margin-bottom: 0.02rem;
  }
  .productDateMoney{
    font-size: 0.26rem;
    color: #333333;
  }
  .position-vertical-demo {
    background-color: #ffe26d;
    color: #000;
    text-align: center;
    padding: 15px;
  }
  .mint-loadmore-top{
    font-size: 0.28rem;
  }
  .blank{
    height: 2rem;
  }
  /* .bodyContent{
    position:fixed;
    top: 2.8rem;
  } */
  .typeMsg{
    margin-left: 0.3rem;
  }
  /*筛选框样式*/
  .screenMenu{
    position: relative;
    width: 100%;
    height:100%;
    top: 0;
    left: 0;
  }
  .scrollcontaner{
    position: absolute;
    top:0;
    left: 0;
    bottom: .88rem;
    overflow-y: scroll;
        background: #fff;
  }
  .type{
    font-weight:bold;
    font-size: .3rem;
    margin:.36rem auto .19rem .3rem;
  }
  .container{
    display: flex;
    flex-wrap:wrap;
  }
  .tab{
    height:.48rem;
    margin:.12rem .3rem .12rem 0;
    padding:0 .22rem;
    line-height: .48rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size:.26rem;
    color: #333333;
    border:.01rem solid #cccccc;
    border-radius: .48rem;
    border: 1px solid #ccc;
  }
  .selected{
    background-color: #333333;
    color: #ffffff;
    border-color:#333333;
  }
  .buttons{
    position: absolute;
    left:0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: .88rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* border:.02rem solid #EAEAEA; */
  }
  .button{
    width: 50%;
    height: 100%;
    background-color: #EC1B30;
    color: #ffffff;
    line-height: .88rem;
    text-align: center;
    font-size: .34rem;
  }
  .button:first-child{
    border-right:.01rem solid #EAEAEA;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #ec1b30;
  }

</style>
<style >
div.vux-header {
  background-color: #fff;
}
div.vux-header .vux-header-left a {
  color: #333;
}
div.vux-header .vux-header-left .left-arrow:before {
  border: 1px solid #333;
  border-width: 1px 0 0 1px;
}
div.vux-header .vux-header-right a {
  color: #333;
}
div.vux-header .vux-header-title {
  color: #333;
}
</style>